<template>
	<view class="withdrawal">
		<view class="money">
			<text>总金额</text>
			<text>{{userInfo.money}}</text>
		</view>
		<view class="modes">
			<view class="title">
				<text>选择提现方式(自动打款升级中)</text>
			</view>
			<view class="lists">
				<view class="list" @click="selePay(1)">
					<view class="list-left">
						<image :src="require(`../../../static/images/pay_1.png`)" mode=""></image>
						<view class="list-left-txt">
							<text>微信</text>
							<text>预计1~2天到账</text>
						</view>
					</view>
					<view class="list-right">
						<text class="iconfont" :class="{'icon-duihao':1===payId}"></text>
					</view>
				</view>
				<view class="list" @click="selePay(2)">
					<view class="list-left">
						<image :src="require(`../../../static/images/pay_2.png`)" mode=""></image>
						<view class="list-left-txt">
							<text>支付宝</text>
							<text>预计1~2天到账</text>
						</view>
					</view>
					<view class="list-right">
						<text class="iconfont" :class="{'icon-duihao':2===payId}"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="account" v-if="userInfo.money>0">
			<view v-if="payId === 1" class="image image-right" @click="upload()">
				<image v-if="wx.url" :src="wx.url" mode="aspectFit"></image>
				<text v-else class="iconfont icon-upload"></text>
			</view>
			<view v-if="payId === 2" class="image image-right" @click="upload()">
				<image v-if="zfb.url" :src="zfb.url" mode="aspectFit"></image>
				<text v-else class="iconfont icon-upload"></text>
			</view>
			<text>请上传{{payId===1?'微信':'支付宝'}}收款截图</text>
		</view>
		<view class="btn" :class="$isPC ? 'IsPC':''" @click="withdrawal()">
			<text>提现</text>
		</view>
	</view>
</template>

<script>
	import {uploadImg,getCollection,withdrawal} from "@/api/entrance.js"
	import {mapActions,mapState} from 'vuex';
	export default{
		name:"withdrawal",
		data(){
			return{
				payId:1,
				zfb:{
					pathUrl:"",
					url:""
				},
				wx:{
					pathUrl:"",
					url:""
				}
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:"/pages/users/money-record/money-record"
			})
		},
		onLoad() {
			this.getCollection()
		},
		methods:{
			...mapActions(['setUserInfo_action']),
			selePay(val){
				this.payId = val
			},
			async getCollection(){
				let res = await getCollection();
				if(res.code === 1 && res.data.length){
					this.zfb.url = res.data[0].zfb
					this.wx.url = res.data[0].wx
				}
			},
			//提现
			async withdrawal(){
				if(!this.userInfo.money){
					this.$msg("可提现金额不足！")
					return
				}
				if(this.payId===1){
					if(!this.wx.url){
						this.$msg("请上传微信收款二维码")
						return
					}
				}else{
					if(!this.zfb.url){
						this.$msg("请上传支付宝收款二维码")
						return
					}
				}
				let res = await withdrawal({
					type:1,
					w_account:this.payId===1?this.wx.url:this.zfb.url
				});
				if(res.code === 1){
					this.setUserInfo_action()
				}
				this.$msg(res.msg)
			},
			//图片上传
			upload(i) {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//图片上传
						const uploadTask = uni.uploadFile({
							url:this.$baseURL+'/api/upload/uploadImg',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('oauth_token')
							},
							formData:{
								'action':this.payId===1?'wx':'"zfb"',
								'url':this.payId===1?this.wx.pathUrl:this.zfb.pathUrl
							},
							success: async (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								if(res.code === 1){
									if(this.payId === 1){
										this.wx = res.data
									}
									if(this.payId === 2){
										this.zfb = res.data
									}
									await uploadImg({action:this.payId===1?'wx':'zfb',
									url:this.payId===1?this.wx.pathUrl:this.zfb.pathUrl})
								}
							}
						});
						uploadTask.onProgressUpdate((res) => {
						    if (res.progress > 5000) {
								this.$msg("上传失败")
						        uploadTask.abort();
						    }
						});
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped src="./withdrawal.less">
</style>
